<!--标签管理列表-->
<style lang="less">
  @import 'cms_tags.less';
</style>

<template>
  <div id="cms_tags">
    <Row>
      <Col span="24">
        <Card>
          <p slot="title" style="height: 32px">
            <Button type="primary" @click="alertAdd" icon="md-add">新增</Button>
          </p>
          <div>
            <Table :loading="tableLoading" :columns="columnsList" :data="tableData" border disabled-hover></Table>
          </div>
        </Card>
      </Col>
    </Row>
    <Modal v-model="modalSetting.show" width="668" @on-visible-change="doCancel">
      <p slot="header" style="color:#2d8cf0;">
        <Icon type="md-information-circle"></Icon>
        <span>{{formItem.id ? '编辑' : '新增'}}菜单</span>
      </p>
      <Form ref="myForm" :rules="ruleValidate" :model="formItem" :label-width="80">
        <FormItem label="标签名称" prop="name">
          <Input v-model="formItem.name" placeholder="请输入标签名称"></Input>
        </FormItem>
        <FormItem label="文档数量" prop="info">
          <InputNumber :min="0" v-model="formItem.num" title="文档数量 | 非必填" placeholder="文档数量 | 非必填" style="width: 220px"></InputNumber>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="text" @click="cancel" style="margin-right: 8px">取消</Button>
        <Button type="primary" @click="submit" :loading="modalSetting.loading">确定</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
  import { CmsTagsListIndex, CmsTagsListAdd, CmsTagsListEdit, CmsTagsListDel, CmsTagsListCount} from '@/api/cms/tags'
  const editButton = (vm, h, currentRow, index) => {
    return h('Button', {
      props: {
        type: 'primary'
      },
      style: {
        margin: '0 5px'
      },
      on: {
        'click': () => {
          vm.formItem = currentRow
          vm.modalSetting.show = true
          vm.modalSetting.index = index
          // vm.formItem.islast = currentRow.islast
          if (currentRow.islast === 1)
            vm.status = '是'
          else
            vm.status = '否'
        }
      }
    }, '编辑')
  }
  const deleteButton = (vm, h, currentRow, index) => {
    return h('Poptip', {
      props: {
        confirm: true,
        title: '您确定要删除这条数据吗? ',
        transfer: true
      },
      on: {
        'on-ok': () => {
          CmsTagsListDel({'id': currentRow.id}).then(function (response) {
            currentRow.loading = false
            if (response.data.code === 1) {
              vm.tableData.splice(index, 1)
              vm.$Message.success(response.data.msg)
            } else {
              vm.$Message.error(response.data.msg)
            }
          })
        }
      }
    }, [
      h('Button', {
        style: {
          margin: '0 5px'
        },
        props: {
          type: 'error',
          placement: 'top',
          loading: currentRow.isDeleting
        }
      }, '删除')
    ])
  }
  export default {
    name: 'cms_tags',
    data () {
      return {
        status: '否',
        columnsList: [
          {
            title: '标签ID',
            key: 'id',
            // width: 75,
            align: 'center'
          },
          {
            title: '标签名称',
            align: 'center',
            key: 'name',
            // width: 300
          },
          {
            title: '文档数量',
            align: 'center',
            key: 'num'
          },
          {
            title: '创建时间',
            align: 'center',
            key: 'createTime'
          },
          {
            title: '操作',
            align: 'center',
            key: 'handle',
            // width: 200,
            handle: ['edit', 'delete']
          }
        ],
        tableLoading: false,
        tableData: [],
        modalSetting: {
          show: false,
          loading: false,
          index: 0
        },
        formItem: {
          id: 0,
          name: '',
          num: 0
        },
        ruleValidate: {
          name: [
            { required: true, message: '菜单名称不能为空', trigger: 'blur' }
          ]
        }
      }
    },
    created () {
      this.init()
      this.getList()
    },
    methods: {
      init () {
        let vm = this
        this.columnsList.forEach(item => {
          if (item.handle) {
            item.render = (h, param) => {
              let currentRowData = vm.tableData[param.index]
              return h('div', [
                editButton(vm, h, currentRowData, param.index),
                deleteButton(vm, h, currentRowData, param.index)
              ])
            }
          }
        })
      },
      alertAdd () {
        this.formItem ={}
        // this.$refs['myForm'].resetFields()
        this.formItem.id = 0
        this.formItem.num = 0
        // this.init()
        this.modalSetting.show = true
      },
      submit () {
        let self = this
        this.$refs['myForm'].validate((valid) => {
          if (valid) {
            // self.modalSetting.loading = true;
            if (this.formItem.id === 0) {
              CmsTagsListAdd(this.formItem).then(response => {
                if (response.data.code === 1) {
                  self.$Message.success(response.data.msg)
                  self.getList()
                  self.cancel()
                } else {
                  self.$Message.error(response.data.msg)
                }
              }).catch(err => {
                console.log(err)
              })
            } else {
              console.log(this.formItem)
              CmsTagsListEdit(this.formItem).then(response => {
                if (response.data.code === 1) {
                  self.$Message.success(response.data.msg)
                  self.getList()
                  self.cancel()
                } else {
                  self.$Message.error(response.data.msg)
                }
              })
            }
          }
        })
      },
      cancel () {
        this.modalSetting.show = false
      },
      doCancel (data) {
        if (!data) {
          // this.formItem.id = 0
          // this.$refs['myForm'].resetFields()
          this.modalSetting.loading = false
          this.modalSetting.index = 0
        }
      },
      getList () {
        let vm = this
        vm.tableLoading = true
        CmsTagsListIndex().then(response => {
          let res = response.data
          vm.tableLoading = false
          if (res.code === 1) {
            vm.tableData = res.data.list
          } else {
            vm.$Message.error(res.msg)
          }
        })
      }
    }
  }
</script>
